<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .file-upload{
            display: inline-block;
            width: 80px;
            height: 80px;
            background-color: #dedede;
            border: 1px solid #ccc;
        }
        .file-upload input{
            display: none;
        }
        .file-upload img{
            width: 100%;
            height: 100%;
            object-fit: scale-down;
        }
    </style>
</head>
<body>
    <!-- <object data="../note/01-Vue基础篇.pdf" style="width:100%" type=""></object> -->
    <div id="app">
        <!-- HTML元素规则，文件选择表单标签为只读标签[只有事件绑定能够生效，value属性操作不会成功]，不能被修改替换 -->
        <!-- <input type="file" v-model="file"> -->
        <!-- 文件选择器的双向操作，是以多标签组合方式实现视觉上类双向操作行为 -->
        <label class="file-upload">
            <!-- <img :src="path"> -->
            <img :src="fileObj.path">
            <!-- <video src=""></video> -->
            <!-- <audio src=""></audio> -->
            <!-- <object data="" type=""></object> -->
            <input type="file" @change="chooseFile( $event.target )">
        </label>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    file:null,
                    // path:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
                    fileObj:{
                        path:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
                        file:null
                    }
                }
            },
            methods:{
                chooseFile(fileDom){
                    console.log(fileDom.files)
                    console.log(fileDom.files[0])
                    let path = window.URL.createObjectURL(fileDom.files[0])
                    console.log(path)
                    // this.path = path;
                    this.fileObj.path = path;
                    this.fileObj.file = fileDom.files[0]

                }
            }
        }).mount("#app")
    </script>
</body>
</html>